<template>
  <el-dialog
    width="80%"
    @open="handleOpen"
    @close="handleClose"
    title="详情"
    :visible="dialogVisible"
  >
    <el-form
      :model="postData"
      :rules="postRules"
      ref="postForm"
      label-width="120px"
      label-position="left"
    >
      <h1>租房合同</h1>
      <el-row v-if="user && owner">
        <el-col :span="6">
          <el-form-item label="甲方">
            <el-image
              style="height: 80px;width: 80px"
              :src="user.userInfo.picture || require('@/common/img/null.jpg')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="甲方用户名">
            {{ user.userInfo.firstName + user.userInfo.lastName || "保密" }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="乙方">
            <el-image
              style="height: 80px;width: 80px"
              :src="owner.userInfo.picture || require('@/common/img/null.jpg')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="乙方用户名">
            {{ owner.userInfo.firstName + owner.userInfo.lastName || "保密" }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附加信息" prop="content">
            <div v-if="postData.status === '1'">
              <el-input type="textarea" v-model="postData.content" />
            </div>
            <span v-else>
              {{ postData.content }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="ask">
        <el-col :span="6">
          <el-form-item label="开始时间">
            {{ ask.startTime | timeFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束时间">
            {{ ask.endTime | timeFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="约定租金">
            {{ ask.rent }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="甲方">
            {{ postData.status | oneStatusFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方">
            {{ postData.status | twoStatusFilter }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="是否生效">
            {{ postData.status | threeStatusFilter }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button type="primary" v-if="postData.status === '1'" @click="save"
        >发 起</el-button
      >
      <el-button type="primary" v-if="postData.status === '6'" @click="destory"
      >毁 约</el-button
      >
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import postDialog from "../../../mixins/postDialog";

export default {
  name: "postDialog",
  mixins: [postDialog],
  data() {
    return {
      postData: {
        content: "",
        status: "",
        ask: {}
      },
      postRules: {
        content: [{ required: true, message: "请填写内容", trigger: "blur" }]
      },
      editUrl: "/api/lease/lease",
      getDetailUrl: "/api/lease/lease"
    };
  },
  methods: {
    save() {
      this.postData.status = "2";
      this.submit();
    },
    async destory() {
      this.postData.status = "5";
      this.editUrl = "/api/lease/lease/status"
      await this.submit();
      this.editUrl = "/api/lease/lease"
    }
  },
  computed: {
    user() {
      return this.postData?.ask?.user;
    },
    house() {
      return this.postData?.ask?.house;
    },
    owner() {
      return this.postData?.ask?.house?.user;
    },
    ask() {
      return this.postData?.ask;
    }
  }
};
</script>

<style scoped></style>
